<template>
  <div>
    <div ref="caller"
         :class="{'sp-input-container':true,'sp-open':show,'sp-disabled':disabled}"
         @click="open">
      <div v-if="!multiple"
           ref="input"
           class="sp-base sp-input">
        <span v-html="results"></span>
        <span v-show="picked.length === 0"
              class="sp-placeholder">{{ placeholderString }}</span>
      </div>
      <div v-show="results"
           :title="i18n.clear"
           class="sp-clear"
           @click.stop="remove">
        <i class="sp-iconfont sp-icon-close"></i>
      </div>
      <div :class="{'sp-button':true,open: show}">
        <span class="sp-caret"></span>
      </div>
    </div>

    <v-dropdown ref="dropdown"
                @show-change="dropdownVisible">
      <div v-if="message"
           class="sp-message">
        <i class="sp-iconfont sp-icon-warning"></i>
        <span v-html="message"></span>
      </div>
      <div v-show="!message"
           class="sp-header">
        <h3 v-html="headerTitle"></h3>
        <button v-if="multiple"
                type="button"
                :title="i18n.select_all"
                class="sp-select-all-btn"
                @click="pickPage(true)">
          <i class="sp-iconfont sp-icon-select-all"></i>
        </button>
        <button v-if="multiple"
                type="button"
                :title="i18n.unselect_all"
                class="sp-remove-all-btn"
                @click="pickPage(false)">
          <i class="sp-iconfont sp-icon-unselect-all"></i>
        </button>
        <button type="button"
                :title="i18n.clear_all"
                class="sp-clear-all-btn"
                @click="remove">
          <i class="sp-iconfont sp-icon-clear"></i>
        </button>
        <button :title="i18n.close_btn"
                type="button"
                class="sp-close-btn"
                @click="close">
          <i class="sp-iconfont sp-icon-close"></i>
        </button>
      </div>

      <!-- 输入框 -->
      <div v-show="!message"
           class="sp-search">
        <input ref="search"
               v-model="search"
               type="text"
               class="sp-search-input"
               autocomplete="off"
               @change="processKey" />
      </div>

      <div v-show="!message"
           ref="list"
           class="sp-result-area">
        <ul v-if="!tbColumns"
            v-show="list.length"
            ref="listUl"
            class="sp-results"
            @mouseleave="highlight=-1">
          <li v-for="(row,index) in list"
              :key="row.id"
              :title="row[showField]"
              :class="{'sp-over':highlight===index,'sp-selected':picked.findIndex(val=>val[keyField] === row[keyField])!==-1}"
              @click="selectItem(row)"
              @mouseenter="highlight=!picked.includes(row)?index:-1"
              v-html="renderCell(row)"></li>
        </ul>
        <div v-if="!list.length"
             class="sp-message"
             v-text="i18n.not_found"></div>
      </div>

      <!-- 分页 -->
      <div v-if="pagination"
           v-show="!message"
           class="sp-pagination">
        <div class="sp-page-info">{{ pageInfo }}</div>
        <ul ref="page">
          <li :class="{'sp-disabled':pageNumber===1}"
              :title="i18n.first">
            <a href="javascript:void(0);"
               @click="switchPage('first')">
              <i class="sp-iconfont sp-icon-first"></i>
            </a>
          </li>
          <li :class="{'sp-disabled':pageNumber===1}"
              :title="i18n.prev">
            <a href="javascript:void(0);"
               @click="switchPage('previous')">
              <i class="sp-iconfont sp-icon-previous"></i>
            </a>
          </li>
          <li :class="{'sp-disabled':pageNumber===totalPage}"
              class="sp-right"
              :title="i18n.last">
            <a href="javascript:void(0);"
               @click="switchPage('last')">
              <i class="sp-iconfont sp-icon-last"></i>
            </a>
          </li>
          <li :class="{'sp-disabled':pageNumber===totalPage}"
              class="sp-right"
              :title="i18n.next">
            <a href="javascript:void(0);"
               @click="switchPage('next')">
              <i class="sp-iconfont sp-icon-next"></i>
            </a>
          </li>
        </ul>
      </div>
    </v-dropdown>
  </div>
</template>

<script type="text/javascript">
import dropdown from "./Dropdown";
import lang from "./language";
export default {
  name: "SelectPage",
  components: {
    "v-dropdown": dropdown
  },
  props: {
    data: {
      type: [Object, Array],
      default: () => {
        return [];
      }
    },
    count: {
      type: Number,
      default: 0
    },

    title: {
      type: String,
      default: "请选择"
    },
    placeholder: {
      type: String,
      default: ""
    },
    multiple: {
      type: Boolean,
      default: false
    },
    language: {
      type: String,
      default: "cn"
    },
    selected: {
      type: String,
      default: ""
    },
    keyField: {
      type: String,
      default: "id"
    },
    showField: {
      type: String | Function,
      default: "name"
    },
    tbColumns: Array,
    sort: String,
    searchField: String,
    pageSize: {
      type: Number,
      default: 10
    },
    maxSelectLimit: {
      type: Number,
      default: 0
    },
    pagination: {
      type: Boolean,
      default: true
    },
    id: {
      type: Number | String,
      default: undefined
    },
    name: {
      type: String
    }
  },
  data() {
    return {
      show: false,
      disabled: false,
      search: "",
      lastSearch: null,
      searchColumn: null,
      i18n: {},
      message: "",
      highlight: -1,
      list: [],
      sortedList: null,
      picked: [],
      pageNumber: 1,
      totalPage: 0,
      totalRows: 0
    };
  },
  computed: {
    headerTitle() {
      const headerStr = this.i18n.items_selected;
      let result = "";
      const replace = val =>
        headerStr.replace("selected_count", `<b>${val}</b>`);

      if (this.picked.length) {
        result = this.multiple
          ? replace(this.picked.length)
          : this.getResults();
      } else result = this.title;
      return result;
    },
    results() {
      return this.getResults();
    },
    placeholderString() {
      return this.placeholder ? this.placeholder : this.i18n.placeholder;
    },
    pageInfo() {
      return this.i18n.page_info
        .replace("page_num", this.pageNumber)
        .replace("page_count", this.totalPage)
        .replace("row_count", this.totalRows);
    }
  },
  watch: {
    show(val) {
      if (val) {
        const that = this;
        this.$refs.dropdown.$emit("show", true, this.$refs.caller);
        this.$nextTick(() => {
          that.$refs.search.focus({ preventScroll: true });
        });
      }
    },
    picked(val) {
      if (
        this.message &&
        this.maxSelectLimit &&
        val.length < this.maxSelectLimit
      ) {
        this.message = "";
      }
    },
    selected(val) {
      this.initSelection();
    },
    data(val) {
      this.populate();
    },
    id(val) {
      if (this.id) {
        this.picked = [{ id: this.id, name: this.name }];
      } else {
        this.picked = [];
      }
    },
    name(val) {
      if (this.name) {
        this.picked = [{ id: this.id, name: this.name }];
      } else {
        this.picked = [];
      }
    }
  },
  created() {
    if (this.id) {
      this.picked = [{ id: this.id, name: this.name }];
    }
  },
  beforeMount() {
    this.i18n = lang[this.language];
  },
  mounted() {
    const className = this.$el.className;
    this.$el.className = "v-selectpage";
    this.$refs.input.className += " " + className;

    if (!this.searchField) {
      if (typeof this.showField === "string") {
        this.searchColumn = this.showField;
      } else if (Array.isArray(this.showField) && this.showField.length) {
        this.searchColumn = this.showField[0].data;
      }
    } else this.searchColumn = this.searchField;

    this.initSelection();

    this.$on("disabled", this.disabledInput);
    this.$on("clear", this.remove);
  },
  destroyed() {
    this.$off("disabled", this.disabledInput);
    this.$off("clear", this.remove);
  },
  methods: {
    open() {
      this.$emit("getList", this.pageNumber, this.search);
      if (this.disabled) return;
      if (!this.show) this.show = true;
      else this.inputFocus();
    },
    close() {
      this.$refs.dropdown.$emit("show", false);
      this.search = "";
    },
    remove(index) {
      const that = this;
      let removed = [];
      this.picked = [];
      if (typeof index !== "number") {
        removed = this.picked.concat();
        this.picked.splice(0, this.picked.length);
      } else {
        removed = [this.picked[index]];
        this.picked.splice(index, 1);
      }

      if (this.multiple && this.show) {
        this.$nextTick(() => {
          that.adjustList();
          that.inputFocus();
        });
      }
      this.$emit("removed", removed);
      this.emitValues();
    },
    pickPage(check) {
      const removed = [];
      for (const row of this.list) {
        if (
          !this.picked.includes(row) &&
          (this.maxSelectLimit && this.picked.length < this.maxSelectLimit) &&
          check
        ) {
          this.picked.push(row); // picked current page items
        }

        if (this.picked.includes(row) && !check) {
          // removed current page items
          const idx = this.picked.findIndex(value => Object.is(value, row));
          if (idx !== -1) {
            removed.push(this.picked[idx]);
            this.picked.splice(idx, 1);
          }
        }
      }

      this.$emit("removed", removed);
      this.$nextTick(() => {
        this.adjustList();
        this.emitValues();
        this.inputFocus();
      });
    },
    inputFocus() {
      this.$refs.search.focus({ preventScroll: true });
    },
    adjustList() {
      this.$refs.dropdown.$emit("adjust", this.$refs.caller);
    },
    getResults() {
      let str = "";
      if (this.picked.length && !this.multiple) {
        switch (typeof this.showField) {
          case "string":
            str += this.picked[0][this.showField];
            break;
          case "function":
            str += this.showField(this.picked[0]);
            break;
        }
      }
      return str;
    },
    dropdownVisible(val) {
      this.show = val;
    },
    processKey(e) {
      if (![37, 38, 39, 40, 27, 13, 9].includes(e.keyCode)) {
        this.$emit("getList", this.pageNumber, this.search);
        // this.populate();
      }
    },
    processControl(e) {
      if ([37, 38, 39, 40, 27, 13, 9].includes(e.keyCode)) {
        switch (e.keyCode) {
          case 37: // left
            this.switchPage("previous");
            break;
          case 38: // up
            this.previous();
            break;
          case 39: // right
            this.switchPage("next");
            break;
          case 40: // down
            this.next();
            break;
          case 9: // tab
          case 13: // return
            if (this.highlight !== -1) {
              this.selectItem(this.list[this.highlight]);
            }
            break;
          case 27: // escape
            this.close();
            break;
        }
      }
    },
    next() {
      if (this.highlight < this.list.length - 1) {
        const that = this;
        const nextIndex = this.list.findIndex((val, idx) => {
          return idx > that.highlight && !that.picked.includes(val);
        });
        if (nextIndex !== -1) this.highlight = nextIndex;
      }
    },
    previous() {
      if (this.highlight > 0) {
        const that = this;
        let preIndex = -1;
        const previous = this.list.filter((val, idx) => {
          return idx < that.highlight && !that.picked.includes(val);
        });
        if (previous.length) {
          preIndex = this.list.findIndex(value =>
            Object.is(value, previous[previous.length - 1])
          );
          if (preIndex !== -1) this.highlight = preIndex;
        }
      }
    },
    renderCell(row) {
      let result = "";
      if (row && Object.keys(row).length) {
        if (typeof this.showField === "string") result = row[this.showField];
        else if (typeof this.showField === "function") {
          result = this.showField(row);
        }
      }
      return result;
    },
    selectItem(row) {
      if (this.picked.includes(row)) return;

      this.picked = [row];
      this.close();

      this.emitValues();
      this.highlight = -1;
    },
    populate() {
      if (this.data) {
        const that = this;
        if (this.search && this.search !== this.lastSearch) this.pageNumber = 1;
        if (Array.isArray(this.data)) {
          let list = this.sortedList
            ? this.sortedList.concat()
            : this.data.concat(); // 获取数据列表
          if (this.search) {
            list = list.filter(val =>
              val[that.searchColumn]
                .toLowerCase()
                .includes(that.search.toLowerCase())
            );
          }
          this.totalRows = this.count;
          this.totalPage = Math.ceil(this.count / this.pageSize);
          this.list = list;
        } else if (typeof this.data === "string") {
          this.remote(false);
        }
        if (this.search) this.lastSearch = this.search;
        this.highlight = -1;
      }
      this.inputFocus();
    },
    remote(init) {
      if (
        typeof this.data === "string" &&
        this.dataLoad &&
        typeof (this.dataLoad === "function")
      ) {
        const that = this;
        const queryParams =
          this.params && Object.keys(this.params).length
            ? JSON.parse(JSON.stringify(this.params))
            : {};
        queryParams.pageSize = this.pageSize;
        queryParams.pageNumber = this.pageNumber;
        if (this.sort) queryParams.orderBy = this.sort;
        if (init && this.selected) {
          queryParams.searchKey = this.keyField;
          queryParams.searchValue = this.selected;
        }
        if (this.search) {
          let field = "";
          // this.searchField ? this.searchField : this.showField;
          if (!this.searchField && typeof this.showField === "function") {
            console.error(
              'Your "showField" was a function, in server side mode, your need specified "searchField" to search content.'
            );
          } else {
            field = this.searchField ? this.searchField : this.showField;
            queryParams[field] = this.search;
          }
        }
        this.dataLoad(this, this.data, queryParams).then(resp => {
          if (resp) {
            if (!that.resultFormat || typeof that.resultFormat !== "function") {
              console.error(
                'In server side mode, you need specified "resultFormat" function to format server side result.'
              );
            } else {
              const tmpObj = that.resultFormat(resp);
              if (tmpObj && Object.keys(tmpObj).length) {
                if (!init) {
                  that.list = tmpObj.list;
                  that.totalRows = tmpObj.totalRow;
                  that.totalPage = that.pagination
                    ? Math.ceil(tmpObj.totalRow / that.pageSize)
                    : 1;
                } else that.picked = tmpObj.list;
              }
            }
          }
        });
      }
    },
    switchPage(pNum) {
      if (typeof pNum === "string") {
        switch (pNum) {
          case "first":
            if (this.pageNumber !== 1) this.pageNumber = 1;
            break;
          case "previous":
            if (this.pageNumber !== 1) this.pageNumber--;
            break;
          case "next":
            if (this.pageNumber !== this.totalPage) this.pageNumber++;
            break;
          case "last":
            if (this.pageNumber !== this.totalPage) {
              this.pageNumber = this.totalPage;
            }
            break;
        }
      } else if (typeof pNum === "number") {
        this.pageNumber = pNum;
      }
      this.$emit("getList", this.pageNumber, this.search);
      // this.populate();
    },
    initSelection() {
      if (this.selected) {
        if (Array.isArray(this.data)) {
          const that = this;
          const arr = this.selected.split(",");
          if (arr.length) {
            const matchRows = this.data.filter(val =>
              arr.includes(String(val[that.keyField]))
            );
            if (matchRows.length) {
              this.picked = this.multiple ? matchRows : [matchRows[0]];
              this.emitValues();
            }
          }
          this.findSelectionPage();
        } else if (typeof this.data === "string") {
          this.remote(true);
        }
      }
      this.populate();
    },
    findSelectionPage() {
      if (!this.multiple && this.pagination) {
        const list = this.sortedList
          ? this.sortedList.concat()
          : this.data.concat();
        const index = list.findIndex(
          val => String(val[this.keyField]) === this.selected
        );
        if (index >= 0) {
          this.pageNumber = Math.ceil((index + 1) / this.pageSize);
        }
      }
    },
    disabledInput(val) {
      if (typeof val === "boolean") this.disabled = val;
      if (val === true && this.show) this.close();
    },
    emitValues() {
      this.$emit("values", this.picked.concat());
    }
  }
};
</script>

<style lang="scss" scoped>
div.v-selectpage {
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
  /* font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  box-sizing: border-box;
  div.sp-input-container {
    position: relative;
    span.sp-placeholder {
      color: #aaaaaa;
    }
    &.sp-open {
      div.sp-input,
      div.sp-inputs {
        border: 1px solid #409eff;
        color: black;
        border-radius: 5px;
      }
      div.sp-input {
        background-color: #f9f9f9;
      }
    }
    &.sp-disabled {
      div.sp-input,
      div.sp-inputs {
        cursor: not-allowed;
        color: #555555;
        background-color: #eeeeee;
      }
      div.sp-button {
        cursor: not-allowed;
      }
    }
    div.sp-base {
      display: block;
      padding: 6px 38px 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
      -o-transition: border-color ease-in-out 0.15s,
        box-shadow ease-in-out 0.15s;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
      box-sizing: border-box;
    }
    div.sp-input {
      background-color: white;
      cursor: pointer;
      color: #333333;
      opacity: 1;
    }
    div.sp-inputs {
      /* margin: 0 24px 0 0; */
      padding: 3px 24px 0 3px;
      position: relative;
      overflow: hidden;
      clear: both;
      cursor: pointer;
      list-style: none;
      height: auto;
      min-height: 34px;
      font-size: 14px;
      span.sp-placeholder {
        margin-left: 9px;
        margin-top: 3px;
        display: inline-block;
      }
      span.sp-selected-tag {
        list-style: none;
        padding: 0 5px;
        margin-right: 3px;
        margin-bottom: 3px;
        /* margin-bottom: 2px; */
        float: left;
        position: relative;
        box-sizing: content-box;
        border: 1px solid #aaaaaa;
        border-radius: 3px;
        background-color: #efefef;
        cursor: pointer;
        max-width: 100%;
        box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
        // height: 24px;
        line-height: 24px;
        -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
        &:hover {
          background-color: white;
          border: 1px solid #d0d0d0;
          box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
        }
        i {
          font-size: 14px;
          color: #aaaaaa;
          &:hover {
            color: black;
          }
        }
      }
    }
    div.sp-clear {
      position: absolute;
      top: 0;
      right: 25px;
      display: block;
      width: auto;
      height: 100%;
      cursor: pointer;
      font-size: 20px;
      color: #666666;
      font-weight: 600;
      margin: 0;
      padding: 4px 0 0 0;
      box-sizing: border-box;
      line-height: 1;
      i {
        font-size: 12px;
      }
      &:hover {
        color: black;
        font-weight: bold;
      }
    }
    div.sp-button {
      display: inline-block;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      cursor: pointer;
      text-align: center;
      box-sizing: border-box;

      border: 0;
      width: 24px;
      height: 100%;
      padding: 0;
      vertical-align: middle;
      line-height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      span.sp-caret {
        position: absolute;
        top: 50%;
        right: 12px;
        margin-top: -1px;
        vertical-align: middle;
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        border-top: 4px dashed;
        /* border-top: 4px solid\9; */
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        transition: transform 0.2s ease;
      }
      &.open span.sp-caret {
        transform: rotate(180deg);
      }
    }
  }

  div.sp-header {
    /* border-bottom: 1px solid #E6E7E7; */
    background-color: white;
    /* position: relative; */
    & > h3 {
      margin: 6px 100px 0 10px;
      text-align: left;
      height: 18px;
      color: #24292e;
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
    }
    button {
      position: absolute;
      -webkit-appearance: none;
      padding: 0;
      cursor: pointer;
      background: 0 0;
      border: 0;
      outline: none;
      line-height: 100%;
      color: #999999;
      top: 3px;
      font-size: 21px;
      &.sp-close-btn {
        right: 9px;
      }
      &.sp-remove-all-btn {
        right: 55px;
      }
      &.sp-select-all-btn {
        right: 81px;
      }
      &.sp-clear-all-btn {
        right: 31px;
      }
      &:hover {
        color: black;
      }
    }
  }

  .sp-search {
    padding: 10px;
    background-color: white;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    .sp-search-input {
      display: block;
      background-color: #fdfdfd;
      margin: 0 !important;
      width: 100%;

      font-size: 14px;
      line-height: 20px;
      min-height: 20px;
      padding: 4px 6px;
      vertical-align: middle;
      box-sizing: border-box;

      outline: none !important;
      height: 30px;

      border-radius: 2px;
      border: 1px solid #dddddd;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      &:focus {
        border: 1px solid #bbbbbb;
        box-shadow: 0 0 0 3px rgba(150, 150, 150, 0.2);
        background-color: white;
      }
    }
  }

  div.sp-result-area {
    background-color: white;
    min-width: 270px;
    max-height: 320px;
    overflow-y: auto;
    ul.sp-results {
      background-color: white;
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        height: auto !important;
        line-height: 1;
        margin: 0;
        // overflow: hidden;
        padding: 4px 8px;
        position: relative;
        text-align: left;
        // white-space: nowrap;
        font-size: 14px;
        color: black;
        cursor: pointer;
        &.sp-message-box {
          height: 30px;
          line-height: 30px;
          text-align: center;
          box-sizing: content-box;
          font-size: 14px;
          cursor: default;
        }
        &.sp-over {
          background-color: #53a4ea !important;
          color: #fff !important;
          cursor: pointer;
        }
        &.sp-selected {
          color: #cccccc;
          cursor: default;
        }
      }
    }
    table.sp-table {
      width: 100%;
      td,
      th {
        font-size: 14px;
        border: 0 !important;
      }
      th {
        background-color: #f5f5f5;
        padding: 5px 8px;
      }
      td {
        padding: 4px 8px;
      }
      tbody {
        tr {
          &.sp-over {
            td {
              background-color: #53a4ea !important;
              color: #fff !important;
              cursor: pointer;
            }
          }
          &.sp-selected {
            color: #cccccc;
            cursor: default;
          }
        }
      }
    }
  }

  div.sp-pagination {
    padding: 0;
    background-color: white;
    position: relative;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    text-align: center;
    font-size: 14px;
    div.sp-page-info {
      height: 28px;
      line-height: 29px;
      font-weight: 400;
    }
    ul {
      position: absolute;
      top: 0;
      padding: 0;
      margin: 0;
      text-align: left;
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;
      width: 100%;
      li {
        display: inline-block;
        text-align: center;
        a {
          display: inline-block;
          padding: 7px 7px 5px 7px;
          font-size: 14px;
          color: #6a737d;
          text-decoration: none;
          cursor: pointer;
          height: 28px;
          line-height: 100%;
          background: transparent;
          &:hover {
            color: black;
            font-weight: bold;
          }
        }
        &.sp-right {
          float: right;
        }
        &:first-child {
          border-bottom-left-radius: 2px;
        }
        &:last-child {
          border-bottom-right-radius: 2px;
        }
        &.sp-disabled {
          a {
            color: #dddddd;
            font-weight: normal; /* cursor: not-allowed; */
          }
        }
      }
    }
  }
  div.sp-message {
    padding: 10px;
    i {
      position: absolute;
      top: 3px;
      font-size: 22px;
    }
    span {
      margin-left: 30px;
    }
  }
}
</style>
<style lang="scss">
/* icons */
@font-face {
  font-family: "iconfont";
  src: url("?t=1530004230003"); /* IE9*/
  src: url("?t=1530004230003#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("data:application/x-font-woff;charset=utf-8;base64,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")
      format("woff"),
    url("?t=1530004230003")
      format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url("?t=1530004230003#iconfont")
      format("svg"); /* iOS 4.1- */
}

.sp-iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sp-icon-warning:before {
  content: "\e663";
}
.sp-icon-clear:before {
  content: "\e74b";
}
.sp-icon-unselect-all:before {
  content: "\e634";
}
.sp-icon-select-all:before {
  content: "\e628";
}
.sp-icon-last:before {
  content: "\e67e";
}
.sp-icon-first:before {
  content: "\e681";
}
.sp-icon-next:before {
  content: "\e70d";
}
.sp-icon-previous:before {
  content: "\e70f";
}
.sp-icon-close:before {
  content: "\e600";
}
</style>
